<template>
   <div>
    <div class="topTabStyle">
        <div class="tabStyleChild" style="width: 160px;">
				<div :class="{ tabSelect: item.id === activeId }" v-for="(item, index) in tabs" @click="change(item)">
					{{ item.name }}
				</div>
			</div>
    </div>
    <div class="user-blo">
        <div v-if="activeId==1">
            <el-form
            style="width: 600px;"
				ref="ruleFormRef"
				:model="phoneForm"
				:rules="rules"
				label-width="120px"
				class="demo-ruleForm"
				
				status-icon
			>
            
            <el-form-item :label="'账户'">
					<!-- <div>{{info.un}}</div> -->
                    <el-input :disabled="true" style="width:400px" v-model="info.un" />
				</el-form-item>
                <el-form-item :label="'用户ID'">
					<!-- <div>{{info.id}}</div> -->
                    <el-input :disabled="true" style="width:400px" v-model="info.id" />
				</el-form-item>
            <el-form-item v-if="isDisable" :label="'当前手机'">
					<!-- <div>{{phone}}</div> -->
                    <el-input :disabled="true" style="width:400px" v-model="phone" />
				</el-form-item>
				<el-form-item :label="'新手机号'">
					<el-input style="width:400px" v-model="phoneForm.phone" />
				</el-form-item>
				<el-form-item label="验证码">
                    <div style="display: flex;justify-content: flex-start;">
                        <el-input style="width:400px" v-model="phoneForm.verfiy" />
                   <el-button style="margin-left: 14px;" type="primary" :disabled="time!=0" @click="sendCode">{{ time==0?'获取验证码':time+'s'}}</el-button>
				
                    </div>
					</el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="bindPhone">确认</el-button>
           
                </el-form-item>
                
				
			</el-form>
            
        </div>
        <div class="user-flex-2" v-else-if="activeId==2">
            <div class="user-flexl">
                <div class="item-user"></div>
                <div>
                    <div>微信</div>
                    <div style="color: #999;font-size: 14px;">绑定微信账号后，您可使用微信账号登录网站</div>
                </div>
            </div>
            <el-button style="width: 90px;" type="primary" @click="wechatBind">{{ isDisableWechat?'解绑微信':'绑定微信' }}</el-button>

        </div>
    </div>
    <el-dialog v-model="isShow" title="微信绑定" width="360px">
			<div class="loginPanel normalPanel">
					<!-- <div class="title">微信登录</div> -->
					<div class="waiting panelContent">
						<div class="wrp_code"><el-image class="qrcode lightBorder" :src="qrcode" /></div>
						<div class="info">
              <div class="status status_browser js_status js_wx_default_tip" id="wx_default_tip">
                <p>使用微信扫一扫绑定</p>

              </div>
              <div class="status status_succ js_status js_wx_after_scan" style="display:none" id="wx_after_scan">
                <i class="status_icon icon38_msg succ"></i>
                <div class="status_txt">
                  <h4>扫描成功</h4>
                  <p>在微信中轻触允许即可登录</p>
                </div>
              </div>
              <div class="status status_fail js_status js_wx_after_cancel" style="display:none" id="wx_after_cancel">
                <i class="status_icon icon38_msg warn"></i>
                <div class="status_txt">
                  <h4>你已取消此次登录</h4>
                  <p>你可再次扫描登录，或关闭窗口</p>
                </div>
              </div>
            </div>
					</div>
				</div>

		</el-dialog>
   
   </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed,ref,reactive } from 'vue'
import { useAuth, useGlobalLayout } from '@/hooks'
import { postUnBind,postUserInfo,postSendCode,postBindCode,postBindStatus,postBindPhone } from '@/api'
import { ElMessage } from 'element-plus';
const time = ref(0)
const tabs = ref([
    {
        id:1,
        name:'手机绑定'
    },
    {
        id:2,
        name:'微信绑定'
    },
])
const activeId = ref(0)
const phoneForm = reactive({
    phone:'',
    verfiy:''
})
const phone = ref('')
const info =ref()
const isDisable = ref(false)
const isDisableWechat = ref(false)
const getData=async()=>{
    const r = await postUserInfo()
    if(r){
        info.value = r.data
        phone.value = r.data.telephone
        if(r.data.telephone){
            isDisable.value = true
        }else{
            isDisable.value = false
        }
        if(r.data.wxopenid){
            isDisableWechat.value = true
        }else{
            isDisableWechat.value = false
        }
        activeId.value = 1
    }
}
const change = (item)=>{
    activeId.value = item.id
}
let timer = null
const sendCode = async()=>{
    var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
  
    if(!phoneForm.phone){
        ElMessage.error('请先输入手机号码')
        return
    }else{
        if(!reg.test(phoneForm.phone)){
            ElMessage.error('请先输入正确的手机号码')
            return
        }
    }
    const r = await postSendCode({
        phone:phoneForm.phone
    }
       
    )
    if(r){
        time.value = 60
        timer  = setInterval(()=>{
            if(time.value==0){
                clearInterval(timer)
                timer=null
            }else{
                time.value--
            }
        },1000)
    }
}
const bindPhone = async()=>{
    var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
  
    if(!phoneForm.phone){
        ElMessage.error('请先输入手机号码')
        return
    }else{
        if(!reg.test(phoneForm.phone)){
            ElMessage.error('请先输入正确的手机号码')
            return
        }
    }
    if (!phoneForm.verfiy){
        ElMessage.error('请先输入验证码')
        return
    }
    const r = await postBindPhone(phoneForm)
    if(r){
        ElMessage.success('绑定成功')
    }
}
const ruleFormRef = ref()
const rules = ref([

])
const isShow = ref(false)
const codeForm = ref({
    random:''
})
const qrcode = ref('')
const wechatBind = async()=>{
    if(isDisableWechat.value){
        const r = await postUnBind()
        if(r){
            ElMessage.success('解绑成功')
            getData()
        }
        return
    }
    const r = await postBindCode()
	if(r){
		qrcode.value = r.data.code
		codeForm.value.random = r.data.random
		isShow.value = true
		getResult()
	}
}
const getResult = async()=>{
	setTimeout(async()=>{
		const r = await postBindStatus({
			random:codeForm.value.random})
	if(r){
		ElMessage({ message: '绑定成功', type: 'success' })
		isShow.value = false
        getData()
	}else{
		if(isShow.value) getResult()
		
	}
	},1000)
	
}
getData()
</script>
<style lang="scss">
.user-flex-2{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-flexl{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.user-blo{
    background: #ffffff;
    margin: 20px;
    padding: 20px;
    border-radius: 15px;
}
.topTabStyle {
	position: relative;
	height: 65px;
	margin: 20px;
	background: #ffffff;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 15px;
}

.tabStyleChild {
    cursor: pointer;
	height: 65px;
	line-height: 65px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
	margin-left: 40px;
	display: flex;
	justify-content: space-between;
}

.tabSelect {
	text-align: center;
	color: #208eff;
	border-bottom: 2px solid #208eff;
}
.item-user{
    margin-right: 16px;
	background-image: url(../style/img/wechat.gif);
	width: 40px;
	height: 40px;
	background-size: 100%;
}

.impowerBox .title {
    text-align: center;
    font-size: 20px;
}
.impowerBox .info {
    width: 280px;
    margin: 0 auto;
}
.impowerBox .status.status_browser {
    text-align: center;
}

.impowerBox .status {
    padding: 7px 14px;
    text-align: left;
}
.qrcode{
	width: 200px;
	height: 200px;
}
.normalPanel{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.js_wx_default_tip{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
</style>